.rvt-app {
    background-color: @bg-sec;
    transition      : @transition;

    .am-tab-bar {
        position: fixed;
        bottom  : 0;
        width   : 100%;
        height  : 50px;
        z-index : 3000;

        .am-tab-bar-bar {
            transition: @transition;

            &::before {
                background-color: @bg-sec;
                transition      : @transition;
            }
        }
    }

    .am-navbar {
        position        : fixed;
        height          : 36px;
        top             : 0;
        width           : 100%;
        z-index         : 3000;
        background-color: @bg-pri;
        color           : @fc-desc;
        box-shadow      : 0px 0px 5px 2px @bg-sec;

        .am-navbar-title {
            color    : @fc-header;
            font-size: 14px;
        }
    }

    .am-list-body {

        &::before,
        &::after {
            background-color: @bg-sec;
        }
    }

    .am-tabs-default-bar {
        background-color: @bg-pri  !important;

        .am-tabs-default-bar-prevpage,
        .am-tabs-default-bar-nextpage {
            display: none;
        }

        .am-tabs-default-bar-tab {
            color: @fc-text;

            &::after {
                background-color: transparent !important;
            }
        }

        .am-tabs-default-bar-tab-active {
            color: @fc-active;
        }

        .am-tabs-default-bar-underline {
            border          : 1px @fc-active solid;
            transform-origin: center;
            transform       : scaleX(0.4);
        }
    }

    input,
    textarea {
        color      : @fc-text  !important;
        caret-color: @fc-active;

        &::placeholder {
            color: @fc-desc;
        }
    }

    .am-list-item {
        padding-right   : 15px;
        background-color: @bg-pri;

        .am-textarea-label,
        .am-input-label {
            font-size: 14px;
            color    : @fc-text;
        }

        .am-list-content {
            color    : @fc-text;
            font-size: 14px;
        }

        .am-list-line {
            padding-right: 0;

            &::after {
                background-color: @bg-sec  !important;
            }
        }
    }

    .am-switch {

        right: 8px;

        .checkbox {
            height          : 14px;
            width           : 32px;
            background-color: @bg-sec;

            &::before {
                width           : 32px;
                height          : 16px;
                top             : 0px;
                left            : -1px;
                background-color: rgba(77, 77, 77, 0.1);
            }

            &::after {
                height: 18px;
                width : 18px;
                top   : -2px;
                left  : -6px;
            }
        }

        input[type="checkbox"]:checked+.checkbox {

            background-color: @fc-active;

            &::before {
                transform       : scale(1);
                background-color: rgba(77, 77, 77, 0.7);
            }

            &::after {
                background-color: @fc-active;
            }
        }
    }

    .divider {
        height          : 1px;
        width           : 100%;
        background-color: @bg-sec;
        margin          : 16px 0;
    }
}

.tag {
    display     : inline-block;
    margin-right: 8px;
    height      : 24px;
    line-height : 24px;
    color       : @fc-active;
    padding     : 0 8px;
    position    : relative;

    &::before {
        position        : absolute;
        height          : 100%;
        width           : 100%;
        content         : '';
        left            : 0;
        top             : 0;
        background-color: @fc-active;
        border-radius   : 12px;
        opacity         : 0.3;
    }

    &::after {
        position     : absolute;
        border-radius: 12px;
        box-sizing   : border-box;
        height       : 100%;
        width        : 100%;
        content      : '';
        left         : 0;
        top          : 0;
        border       : 1px solid @fc-active;
        opacity      : 0.7;
    }
}

.fcList {

    .am-list-body {
        height        : 100%;
        display       : flex;
        flex-direction: column;
    }

    .f1 {
        flex: 1
    }

}

.am-modal-content {
    background-color: @bg-pri;

    .am-modal-title {
        font-size: 16px;
        color    : @fc-header;
    }

    .am-modal-alert-content {
        font-size: 14px;
        color    : @fc-text;
    }

    .am-modal-button-group-normal {
        &::before {
            background-color: @bg-sec;
        }

        .am-modal-button {
            font-size: 14px;
            color    : @fc-active;

            &.am-modal-button-active {
                transition      : @transition;
                background-color: @fc-active;
                opacity         : 0.5;
                color           : #fff;
            }

            &:first-child {
                color: @fc-desc;
            }

            &:last-child {
                &::before {
                    background-color: @bg-sec;
                }
            }
        }
    }
}

.am-textarea-item {
    background-color: @bg-sec;

    &::after {
        background-color: transparent !important;
    }

    textarea {
        font-size: 12px;
        color    : @fc-text;
    }
}

.ka-wrapper {
    position: fixed;
    height  : 100vh;
    height  : calc(100vh - var(--vh-offset, 0px));
    width   : 100vw;
    top     : 0;
    left    : 0;
}

.rvt-headerview {
    height     : 100vh;
    height     : calc(100vh - var(--vh-offset, 0px));
    padding-top: 45px;
    box-sizing : border-box;
    overflow-y : scroll;
}

.rvt-tabview {
    height        : 100vh;
    height        : calc(100vh - var(--vh-offset, 0px));
    padding-bottom: 50px;
    box-sizing    : border-box;
    overflow-y    : scroll;
}

.transition-group {
    .forward-enter {
        opacity  : 0;
        transform: translateX(100%);
    }

    .forward-enter-active {
        opacity   : 1;
        transform : translateX(0);
        transition: all 500ms;
    }

    .forward-exit {
        opacity  : 1;
        transform: translateX(0);
    }

    .forward-exit-active {
        opacity   : 0;
        transform : translateX(-100%);
        transition: all 500ms;
    }

    .back-enter {
        opacity  : 0;
        transform: translateX(-100%);
    }

    .back-enter-active {
        opacity   : 1;
        transform : translateX(0);
        transition: all 500ms;
    }

    .back-exit {
        opacity  : 1;
        transform: translateX(0);
    }

    .back-exit-active {
        opacity   : 0;
        transform : translate(100%);
        transition: all 500ms;
    }
}